/**
 * Created by zc180411-05 on 2018/5/8.
 */
$(function() {
	var myChart = null;
	var dom = document.getElementById("container");
	myChart = echarts.init(dom);
	var app = {};
	option = null;
	var data = null
	// 获取城市数据
	$.ajax({
		type : "get",
		url : "/js/json/cityArea.json",
		async : false,
		success : function(result) {
			data = result
		}
	});

	var geoCoordMap = null
	// 获取城市数据, 地理坐标geoCoordMap
	$.ajax({
		type : "get",
		url : "/js/json/cityValue.json",
		async : false,
		success : function(result) {
			geoCoordMap = result
		}
	});

	var convertData = function(data) {
		var res = [];
		for (var i = 0; i < data.length; i++) {
			var geoCoord = geoCoordMap[data[i].name];
			if (geoCoord) {
				res.push({
					name : data[i].name,
					value : geoCoord.concat(data[i].value)
				});
			}
		}
		return res;
	};

	var option = {
		// backgroundColor: '#404a59'#f8f8f8,地图背景色
		backgroundColor : '#152349',
		roam : false,
		title : {
			text : '全国服务网点  全新全意服务',
			subtext : '增材制造创新中心',
			sublink : 'http://www.niiam.cn/',
			left : 'center',
			top : "35px",
			textStyle : {
				// color: '#666666',
				color : 'white',
				margin : '20px',
				fontSize : '24'
			},
			subtextStyle : {
				color : 'white',
				fontSize : '20',
				fontWeight : 'bold'
			}
		},
		tooltip : {
			trigger : 'item',
			position:  ['50%', '50%'],
			// 鼠标放到城市上的提示
			formatter : function(params) {
				return params.seriesName + '<br/>' + params.name + ' : '
						+ params.value[2];
			}
		},
		visualMap : {
			show : true,
			left : '20',
			min : 0,
			max : 200,
			text : [ '高', '低' ],
			realtime : true,
			calculable : true,
			// seriesIndex : [ 1 ], // 光点中心颜色控制
			inRange : {
				color : [ '#ddb926', 'yellow' ]
			// 蓝黑
			// color : [ '#3B5077', '#031525' ]
			// 黑紫黑
			// color : [ '#0f0c29', '#302b63', '#24243e' ]

			},
			textStyle : {
				color : 'white',
			},
		},
		legend : {
			orient : 'vertical',
			y : 'bottom',
			x : 'right',
			data : [ '服务网点' ],
			textStyle : {
				color : '#666666'
			}
		},
		geo : {
			map : 'china',
			label : {
				emphasis : {
					show : false
				}
			},
			itemStyle : {
				normal : {
					// areaColor: '#323c48' 6acbcc,地图颜色
					areaColor : '#162a5f',
					// #111 地图省分界色
					borderColor : 'white'
				},
				emphasis : {
					areaColor : '#607594'
				// areaColor: '#de5e00' 2a333d 鼠标划过省颜色
				}
			}
		},
		series : [ {
			name : '设备数量',
			type : 'scatter',
			coordinateSystem : 'geo',
			data : convertData(data),
			symbolSize : function(val) {
				// 地图光斑大小
				return val[2] / 7;
			},
			label : {
				normal : {
					formatter : '{b}',
					position : 'right',
					show : false
				},
				emphasis : {
					show : true
				}
			},
			itemStyle : {
				normal : {
					// color: '#ddb926' #de5e00 地图上有数据的城亮度颜色
					color : '#ddb926'
				}
			}
		},
		// {
		// type : 'map',
		// map : 'china',
		// geoIndex : 0,
		// aspectScale : 0.75, // 长宽比
		// showLegendSymbol : false, // 存在legend时显示
		// label : {
		// normal : {
		// show : true
		// },
		// emphasis : {
		// show : false,
		// textStyle : {
		// color : '#fff'
		// }
		// }
		// },
		// roam : true,
		// itemStyle : {
		// normal : {
		// areaColor : '#031525',
		// borderColor : '#3B5077',
		// },
		// emphasis : {
		// areaColor : '#2B91B7'
		// }
		// },
		// animation : false,
		// data : data
		// },
		{
			name : 'Top 5',
			type : 'effectScatter',
			coordinateSystem : 'geo',
			data : convertData(data.sort(function(a, b) {
				return b.value - a.value;
			}).slice(0, 5)),
			symbolSize : function(val) {
				return val[2] / 10;
			},
			showEffectOn : 'render',
			rippleEffect : {
				brushType : 'stroke'
			},
			hoverAnimation : true,
			label : {
				normal : {
					formatter : '{b}',
					position : 'right',
					show : false
				},
				emphasis : {
					show : false
				}
			},
			itemStyle : {
				normal : {
					// color: '#f4e925',de5e00
					// 亮点top颜色
					color : '#f4e925',
					shadowBlur : 10,
					shadowColor : '#333'
				// shadowColor: '#333'
				}
			},
			zlevel : 1
		} ]
	};
	myChart.setOption(option);

	// 饼图
	var circleData = genData(10);
	console.log(circleData)
	var optionCircle = {
		backgroundColor : '#162a5f',
		title : {
			text : '加工中心实时统计',
			// subtext: '纯属虚构',
			x : 'center',
			textStyle : {
				fontSize : '15',
				color : 'white'
			}
		},
		// 图例颜色
		color : [ '#f6da22', '#bbe2e8', '#6cacde', '#ae75c5', '#3aabbd' ],
		tooltip : {
			trigger : 'item',
			formatter : "{a} <br/>{b} : {c} ({d}%)",
			show : true
		},
		legend : {
			type : 'scroll',
			orient : 'vertical',
			right : 0,
			top : 19,
			bottom : 5,
			data : circleData.legendData,
			selected : circleData.selected,
			textStyle : {
				color : 'white',
				fontSize : '10'
			}
		// 图例字体颜色
		},
		series : [ {
			name : '姓名',
			type : 'pie',
			radius : '55%',
			center : [ '30%', '60%' ],
			data : circleData.seriesData,
			label : {
				normal : {
					show : false,
					textStyle : {
						fontSize : 10
					}
				},
				emphasis : {
					show : true
				}
			},
			itemStyle : {
				emphasis : {
					shadowBlur : 10,
					shadowOffsetX : 0,
					shadowColor : 'rgba(0, 0, 0, 0.5)'
				}
			}
		} ]
	};

	function genData(count) {
		// var nameList = [
		// '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈',
		// '韩',
		// '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金',
		// '魏',
		// '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛',
		// '奚',
		// '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁',
		// '柳',
		// '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷',
		// '罗',
		// '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍',
		// '余',
		// '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪',
		// '祁',
		// '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅',
		// '庞',
		// '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季',
		// '麻',
		// '强', '贾', '路', '娄', '危'
		// ];
		// var legendData = [];
		// var seriesData = [];
		// var selected = {};
		// for(var i = 0; i < 5; i++) {
		// name = Math.random() > 0.65 ?
		// makeWord(4, 1) + '·' + makeWord(3, 0) :
		// makeWord(2, 1);
		// legendData.push(name);
		// seriesData.push({
		// name: name,
		// value: Math.round(Math.random() * 100000)
		// });
		// selected[name] = i < 6;
		// }

		var legendData = [ '深圳加工中心', '东莞加工中心', '无锡加工中心', '西安加工中心', '其他' ]
		var seriesData = [ {
			name : '深圳加工中心',
			value : 100
		}, {
			name : '东莞加工中心',
			value : 200
		}, {
			name : '无锡加工中心',
			value : 300
		}, {
			name : '西安加工中心',
			value : 400
		}, {
			name : '其他',
			value : 80
		} ]
		var selected = {
			'深圳加工中心' : true,
			'东莞加工中心' : true,
			'无锡加工中心' : true,
			'西安加工中心' : true,
			'其他' : true
		};
		return {
			legendData : legendData,
			seriesData : seriesData,
			selected : selected
		};

		function makeWord(max, min) {
			var nameLen = Math.ceil(Math.random() * max + min);
			var name = [];
			for (var i = 0; i < nameLen; i++) {
				name.push(nameList[Math.round(Math.random() * nameList.length
						- 1)]);
			}
			return name.join('');
		}
	}
	var circleChart = echarts.init(document.getElementById('circlePanel'));
	circleChart.setOption(optionCircle, true);

	// 图片随窗口大小自适应
	window.onresize = function() {
		myChart.resize();
		circleChart.resize();
	}
})